<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="https://cdn.tailwindcss.com"></script>
    </head>
    <body>
        <section class="m-3 p-5 border-2 border-black-500">
            <h1 class="text-lg text-red-500 font-bold">边框宽度和颜色</h1>
            <div
                class="w-auto bg-red-500 p-5 my-5 text-white border-4 border-green-500"
            >
                准备好了学习tailwindcss了吗？
            </div>
            <div
                class="w-auto bg-red-500 p-5 my-5 text-white border-x-4 border-green-500"
            >
                准备好了学习tailwindcss了吗？
            </div>
            <div
                class="w-auto bg-red-500 p-5 my-5 text-white border-y-4 border-green-500"
            >
                准备好了学习tailwindcss了吗？
            </div>
        </section>

        <section class="m-3 p-5 border-2 border-black-500">
            <h1 class="text-lg text-red-500 font-bold">边框Radius</h1>
            <div class="w-auto bg-red-500 p-5 my-5 text-white rounded">
                准备好了学习tailwindcss了吗？
            </div>
            <div class="w-auto bg-red-500 p-5 my-5 text-white rounded-lg">
                准备好了学习tailwindcss了吗？
            </div>
            <div class="w-auto bg-red-500 p-5 my-5 text-white rounded-xl">
                准备好了学习tailwindcss了吗？
            </div>
            <div class="w-auto bg-red-500 p-5 my-5 text-white rounded-2xl">
                准备好了学习tailwindcss了吗？
            </div>
            <div class="w-auto bg-red-500 p-5 my-5 text-white rounded-full">
                准备好了学习tailwindcss了吗？
            </div>
            <div class="w-auto bg-red-500 p-5 my-5 text-white rounded-t-3xl">
                准备好了学习tailwindcss了吗？
            </div>
            <div class="w-auto bg-red-500 p-5 my-5 text-white rounded-b-3xl">
                准备好了学习tailwindcss了吗？
            </div>
        </section>

        <section class="m-3 p-5 border-2 border-black-500">
            <h1 class="text-lg text-red-500 font-bold">轮廓Outline</h1>
            <button class="outline outline-offset-2 outline-1 mr-4">
                Button 1
            </button>
            <button class="outline outline-offset-2 outline-2 mr-4">
                Button 2
            </button>
            <button class="outline outline-offset-2 outline-4">Button 3</button>
        </section>
    </body>
</html>
